﻿<div class="ui-widget-content">
    <h3>Tabs - Efeitos</h3>
    <p>
       Tabs também podem conter comportamentos bem interessantes como abrir ao passar o mouse pela tab, fechar o conteúdo ao clicar na aba, e até mesmo alterar a ordem das abas!
    </p>

    <div style="float: left; width: 270px">
        <p>Mouseover:</p>
        <div id="meu_tab2_1">
            <ul>
                <li><a href="#tabs-1_2">tab 1</a></li>
                <li><a href="#tabs-2_2">tab 2</a></li>
                <li><a href="#tabs-3_2">tab 3</a></li>
            </ul>
            <div id="tabs-1_2">
                <p>Aqui vai o conteúdo da tab 1.</p>
            </div>
            <div id="tabs-2_2">
                <p>Podemos colocar qualquer conteúdo aqui, e aparecerá na tab 2.</p>
            </div>
            <div id="tabs-3_2">
                <p>A tab 3 tem mais conteúdo aqui.</p>
            </div>
        </div>
        <pre>$('#meu_tab2_1').tabs({
    event: "mouseover"
});</pre>
    </div>

    <div style="float: left; width: 270px; margin-left: 5px">
        <p>Collapsible:</p>
        <div id="meu_tab2_2">
            <ul>
                <li><a href="#tabs-1_3">tab 1</a></li>
                <li><a href="#tabs-2_3">tab 2</a></li>
                <li><a href="#tabs-3_3">tab 3</a></li>
            </ul>
            <div id="tabs-1_3">
                <p>Aqui vai o conteúdo da tab 1.</p>
            </div>
            <div id="tabs-2_3">
                <p>Podemos colocar qualquer conteúdo aqui, e aparecerá na tab 2.</p>
            </div>
            <div id="tabs-3_3">
                <p>A tab 3 tem mais conteúdo aqui.</p>
            </div>
        </div>
        <pre>$('#meu_tab2_2').tabs({
    collapsible: true
});</pre>
    </div>

    <div style="float: left; width: 270px; margin-left: 5px">
        <p>Sortable:</p>
        <div id="meu_tab2_3">
            <ul>
                <li><a href="#tabs-1_4">tab 1</a></li>
                <li><a href="#tabs-2_4">tab 2</a></li>
                <li><a href="#tabs-3_4">tab 3</a></li>
            </ul>
            <div id="tabs-1_4">
                <p>Aqui vai o conteúdo da tab 1.</p>
            </div>
            <div id="tabs-2_4">
                <p>Podemos colocar qualquer conteúdo aqui, e aparecerá na tab 2.</p>
            </div>
            <div id="tabs-3_4">
                <p>A tab 3 tem mais conteúdo aqui.</p>
            </div>
        </div>
        <pre>$('#meu_tab2_3')
    .tabs()
    .find('.ui-tabs-nav')
    .sortable({ axis: 'x' });</pre>
    </div>

    <div style="clear: both;" />
    <script type="text/javascript">
        inicializador.tabsEfeitosInit = function() {
            $('#meu_tab2_1').tabs({ event: "mouseover" });
            $('#meu_tab2_2').tabs({  collapsible: true });
            $('#meu_tab2_3').tabs().find(".ui-tabs-nav").sortable({ axis: "x" });
        };
    </script>
</div>
